<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务四：定位和居中问题</title>
</head>
<body>
	<style>
*{ padding:0; margin:0;}

.center{width: 400px;height: 200px;
	overflow: hidden;
	position:absolute;top:50%;left:50%;
	margin:-100px 0 0 -200px;
	background: #ccc;
}

.sector{
	position:absolute;
	width: 100px;height: 100px;
	border-radius: 50%;
	background: #fc0;
}
.sector1{
	top:-50px;left:-50px;
}
.sector2{
	bottom:-50px;right:-50px;
}
	</style>
 <div class="center">
 	<div class="sector sector1"></div>
 	<div class="sector sector2"></div>
 </div>
</body>
</html>